<template>
  <!-- {{pmpHooks.pmpDict}} -->
  <!-- <a-button @click="sc">sss</a-button> -->
  <div style="display: flex">
    <div style="flex: 1 1 auto; background: yellow">
      <a-select
        allowClear
        :filter-option="false"
        style="width: 100%"
        :options="options"
        @change="handleChange"
        @search="searchDebounce"
        show-search
        :placeholder="placeholder"
      ></a-select>
    </div>
    <div style="flex: 0 0 64px;text-align:right;">
      <CreateSub size="small"></CreateSub>
    </div>
  </div>
</template>

<script setup>
import pmpHooks from "@/hooks/PmpHooks.js";
import { ref, defineEmits, onMounted } from "vue";
import { debounce } from "lodash";
import CreateSub from "@/components/CreateSub.vue";

const props = defineProps({
  itemClassify: {
    type: String,
    default: "",
  },
  placeholder: {
    type: String,
    default: "Input item name",
  },
});

const emit = defineEmits(["selected"]);
const list = ref([]);
const options = ref([]);

// function sc() {
//   list.value = pmpHooks.searchPmpDict("章程")
// }

async function handleChange(v) {
  if (v) {
    const r = await pmpHooks.loadPmpDict(v);
    emit("selected", r);
  } else {
    emit("selected", { id: "-" });
  }
}

async function search(v) {
  if (!v) {
    v = "";
  }
  options.value = await pmpHooks.searchPmpDict(v, props.itemClassify);
}

onMounted(async () => {
  search("");
});

const searchDebounce = debounce(search, 500);
</script>

<style></style>
